{% stylesheet %}
.block_slides {
  text-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.block_slides .carousel-panel-container {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.block_slides .carousel-panel-container .carousel-panel-container-item {
  display: inline-block;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  vertical-align: top;
}

.block_slides .swiper-slide {
  position: relative;
}

.block_slides .slide-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: var(--mask-color);
  opacity: var(--mask);
}

.block_slides .slide-item-image {
  height: var(--slide-height);
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-image {
    height: calc(var(--slide-height) * 0.6);
    display: none;
  }
}

.block_slides .block-image-mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .block_slides .block-image-mobile {
    display: block;
  }
}

.block_slides .slide-item-content {
  width: 1200px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 100;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .block_slides .slide-item-content {
    width: 100%;
    padding: 0 30px !important;
  }
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content {
    width: 100%;
    padding: 0 15px !important;
  }
}

.block_slides .slide-item-content .slide-item-cell {
  margin-top: 50px;
  display: flex;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content .slide-item-cell {
    margin-top: 20px;
  }
}

.block_slides .slide-item-content .slide-item-title {
  font-weight: 300;
  font-size: 120px;
  line-height: 146px;
  color: var(--title-color);
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content .slide-item-title {
    font-size: calc(120px * 0.4);
    line-height: calc(146px * 0.4);
  }
}

.block_slides .slide-item-content .slide-item-des {
  font-size: 24px;
  line-height: 24px;
  color: var(--title-color);
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content .slide-item-des {
    font-size: calc(24px * 0.8);
    line-height: calc(24px * 0.8);
  }
}

.block_slides .slide-item-content .slide-item-btn {
  position: relative;
  height: 44px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  font-size: 0;
  background-color: #fff;
  padding-left: 66px;
  cursor: pointer;
}

.block_slides .slide-item-content .slide-item-btn .slide-item-btn-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 66px;
  height: 44px;
  background-color: #FFB100;
  align-items: center;
  justify-content: center;
  transition: width .25s;
  z-index: 10;
}

.block_slides .slide-item-content .slide-item-btn .slide-item-btn-icon::before {
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  border-top: 50px solid var(--btn-bg-color);
  border-left: 10px solid transparent;
  border-right: 0 solid transparent;
  content: "";
  z-index: 10;
}

.block_slides .slide-item-content .slide-item-btn svg {
  width: 22px;
  height: 22px;
}

.block_slides .slide-item-content .slide-item-btn path {
  fill: #fff;
}

.block_slides .slide-item-content .slide-item-btn span {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  color: var(--btn-font-color);
  background-color: var(--btn-bg-color);
  display: inline-block;
  font-size: 14px;
  padding: 0 28px;
  position: relative;
  font-weight: bold;
  overflow: hidden;
}

.block_slides .slide-item-content .slide-item-btn:hover .slide-item-btn-icon {
  width: calc(100% + 12px);
}

.block_slides .slide-item-content-left .slide-item-title, .block_slides .slide-item-content-left .slide-item-des {
  text-align: left;
}

.block_slides .slide-item-content-left .slide-item-cell {
  justify-content: start;
}

.block_slides .slide-item-content-center .slide-item-title, .block_slides .slide-item-content-center .slide-item-des {
  text-align: center;
}

.block_slides .slide-item-content-center .slide-item-cell {
  justify-content: center;
}

.block_slides .slide-item-content-right .slide-item-title, .block_slides .slide-item-content-right .slide-item-des {
  text-align: right;
}

.block_slides .slide-item-content-right .slide-item-cell {
  justify-content: flex-end;
}

.container-wrapper .slide-item-content {
  padding: 0 50px;
}

.block_slides .swiper-pagination-bullet {
  opacity: 1;
  background-color: #fff;
}

.block_slides .swiper-pagination-bullet-active {
  background: #333333;
}

{% endstylesheet %}
{% assign blockId = block_id | default : section.block_id %}
{% assign defaultImageEmpty = 'banner@2x.png' | public_asset_abs_url %}

{% if section.settings.is_width_fill  %}
    {% assign container = "container-fill" %}
{% else %}
    {% assign container = "container-wrapper" %}
{% endif %}

<div class="block_slides {{container}}">
  <div class="carousel-panel-container swiper-carousel-{{ blockId }}" id="swiper-carousel-{{ blockId }}">
      <ul class="swiper-wrapper">
          {% for block in section.blocks %}
          <li class="swiper-slide">
              {%- capture href -%}
              {% if block.link.url != "" %}{{ block.link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}
              {%- endcapture -%}

              {% capture cropType %}
              {%- unless section.settings.height  == 'auto' -%}
              data-crop-type="height"
              {%- endunless -%}
              {% endcapture %}

              <a class="carousel-panel-container-item" href="{{href}}"  style="--title-color:{{ block.title_color }};--btn-bg-color:{{ block.button_background_color }};--btn-font-color:{{ block.button_font_color }};--slide-height:{{section.settings.height}}">
                  <img data-src="{{ block.pc_image.src }}" {{cropType}} src="{{ defaultImageEmpty }}"  alt="{{ block.pc_image.alt }}" class="slide-item-image block-image-pc" />
                  <img data-src="{{ block.mobile_image.src | default:block.pc_image.src  }}" {{cropType}} src="{{ defaultImageEmpty }}" alt="{{ block.mobile_image.alt }}" class="slide-item-image block-image-mobile" />
                  <div class="slide-item-mask" style="--mask-color:{{ block.mask_color }};--mask: {{ block.mask | divided_by : 100  }};"></div>
                  <div class="slide-item-{{ blockId }} slide-item-content slide-item-content-{{ block.position }}">
                      <div class="slide-item-title">{{ block.title | upcase }}</div>
                      {% if block.subtitle != "" %}
                        <div class="slide-item-des">{{ block.subtitle }}</div>
                      {% endif %}
                      {% if block.button_text %}
                      <div class="slide-item-cell">
                        <div class="slide-item-btn">
                              <div class="slide-item-btn-icon">
                                {% include "icon_silde_right" %}
                              </div>
                              <span>{{ block.button_text }}</span>
                        </div>
                      </div>
                      {% endif %}
                  </div>
              </a>
          </li>
          {% endfor %}
        
      </ul>

      <div class="swiper-pagination swiper-carousel-pagination-{{ blockId }}"></div>
  </div>
</div>
<script type="text/javascript">
(function(){  new Swiper('.swiper-carousel-{{ block_id | default : section.block_id }}', {
      loop: true,
      autoplay:{% if section.settings.is_play %}{delay: Number('{{section.settings.duration}}') * 1000}{% else %}false{% endif %},
      pagination: {
          el: '.swiper-carousel-pagination-{{ block_id | default : section.block_id }}',
          clickable:true
      }
  })})()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_slides",
	"is_global": false,
	"icon": "icon-lunbotu",
	"name": {
		"zh_CN": "轮播图"
	},
	"max_blocks": "10",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "自动轮播"
			},
			"id": "is_play"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "轮播时间(s)"
			},
			"default": 2,
			"max": 5,
			"min": 1,
			"id": "duration"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图片高度"
			},
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大"
					},
					"value": "800px"
				},
				{
					"label": {
						"zh_CN": "中"
					},
					"value": "600px"
				},
				{
					"label": {
						"zh_CN": "小"
					},
					"value": "420px"
				},
				{
					"label": {
						"zh_CN": "自适应"
					},
					"value": "auto"
				}
			]
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满"
			},
			"id": "is_width_fill",
			"default": true
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "轮播图片"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "pc端图片"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420"
					},
					"id": "pc_image"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "移动端图片"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议1242*2000px"
					},
					"id": "mobile_image"
				},
				{
					"type": "card_select",
					"label": {
						"zh_CN": "标题按钮位置"
					},
					"id": "position",
					"option": [
						{
							"label": {
								"zh_CN": "居左"
							},
							"value": "left"
						},
						{
							"label": {
								"zh_CN": "居中"
							},
							"value": "center"
						},
						{
							"label": {
								"zh_CN": "居右"
							},
							"value": "right"
						}
					],
					"default": "left"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "标题颜色"
					},
					"default": "#fff",
					"id": "title_color"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题"
					},
					"id": "title",
					"default": "Image Slide"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述"
					},
					"id": "subtitle",
					"default": "Tell your brand's story through images Tell your brand's story through imagesTell your brand's Tell your brand's story"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "按钮名称"
					},
					"id": "button_text",
					"default": "SHOP NOW"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮背景"
					},
					"id": "button_background_color",
					"default": "#000"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮文字颜色"
					},
					"id": "button_font_color",
					"default": "#fff"
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "蒙层透明度"
					},
					"id": "mask",
					"max": "100",
					"min": "0",
					"default": "20"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "蒙层颜色"
					},
					"id": "mask_color",
					"default": "#000"
				}
			]
		}
	],
	"default": {
		"settings": {
			"is_play": false,
			"duration": "3",
			"height": "600px",
			"is_width_fill": true
		},
		"blocks": [
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile_image": {
					"src": "",
					"alt": ""
				},
				"position": "center",
				"title_color": "#fff",
				"title": "BEST SALE",
				"subtitle": "The Black Phantom",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_text": "SHOP NOW",
				"button_background_color": "#ffffff",
				"button_font_color": "#1D1F21",
				"mask": "10",
				"mask_color": "#000000",
				"block_type": "slide-item"
			}
		]
	}
}
{% endschema %}